<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-container">
          <h3>订单销售额</h3>
          <div id="orderSalesChart" class="chart"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-container">
          <h3>房型销售额</h3>
          <div id="roomTypeSalesChart" class="chart"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <div class="stat-container">
          <h3>最热门房型</h3>
          <ul>
            <li v-for="(room, index) in topRooms" :key="index">
              {{ room.name }} - {{ room.sales }}
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="stat-container">
          <h3>其他统计信息</h3>
          <p>总订单数: {{ totalOrders }}</p>
          <p>总收入: {{ totalRevenue }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { ElRow, ElCol } from 'element-plus';

// 模拟数据
const orderSalesData = ref([
  { date: '2023-01', sales: 10000 },
  { date: '2023-02', sales: 15000 },
  { date: '2023-03', sales: 12000 },
  { date: '2023-04', sales: 18000 },
  { date: '2023-05', sales: 20000 },
]);

const roomTypeSalesData = ref([
  { roomType: '标准间', sales: 10000 },
  { roomType: '豪华间', sales: 15000 },
  { roomType: '商务间', sales: 12000 },
  { roomType: '总统套房', sales: 18000 },
]);

const topRooms = ref([
  { name: '豪华间', sales: 15000 },
  { name: '总统套房', sales: 18000 },
  { name: '商务间', sales: 12000 },
]);

const totalOrders = ref(100);
const totalRevenue = ref(150000);

// 初始化订单销售额图表
const initOrderSalesChart = () => {
  const chartDom = document.getElementById('orderSalesChart');
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '订单销售额'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: orderSalesData.value.map(item => item.date)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: orderSalesData.value.map(item => item.sales),
        type: 'bar'
      }
    ]
  };
  myChart.setOption(option);
};

// 初始化房型销售额图表
const initRoomTypeSalesChart = () => {
  const chartDom = document.getElementById('roomTypeSalesChart');
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '房型销售额'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: roomTypeSalesData.value.map(item => item.roomType)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: roomTypeSalesData.value.map(item => item.sales),
        type: 'bar'
      }
    ]
  };
  myChart.setOption(option);
};

onMounted(() => {
  initOrderSalesChart();
  initRoomTypeSalesChart();
});
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
}

.chart-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;

  .chart {
    height: 400px;
  }
}

.stat-container {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    margin-bottom: 10px;
  }
}
</style>